<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="统计" name="first">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">网关编号:</div>
            <el-select v-model="geteWayCodes" placeholder="请选择">
              <el-option
                v-for="item in gatewayList"
                :key="item.gatewayCode"
                :label="item.geteWayCode"
                :value="item.gatewayCode"
              />
            </el-select>
          </div>
          <div style="display: flex; align-items: center">
            <div style="margin-right: 4px">数据类型:</div>
            <el-select v-model="dataType" multiple collapse-tags placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="block" style="display: flex; align-items: center">
            <div style="display: flex; align-items: center">
              开始时间：
              <el-date-picker v-model="startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择开始时间" />
            </div>
            <div class="littleMargin" style="display: flex; align-items: center;margin-left: 20px">
              结束时间：
              <el-date-picker
                v-model="endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择结束时间"
              />
            </div>
          </div>
          <el-button @click="gethistoryData">查询</el-button>
        </div>
        <div ref="charts" v-loading="loading" style="width: 100%;height: 700px;margin-top: 20px;padding:20px;background: #FFFFFF">
          <p-echarts :option="option" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史数据" name="second">
        <wise-crud
          ref="wise-crud"
          :urls="urls"
          :fields="fields"
          :handle="handle"
          :filters="filters"
          @selection-change="handleSelectionChange"
        >
          <template slot="outHandle">
            <el-col :span="3">
              <el-button
                v-permission="['superSysOpsAdmin']"
                type="danger"
                @click="batchRemove"
              >删除</el-button>
            </el-col>
          </template>
        </wise-crud>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import pEcharts from '@/components/charts/pEcharts'
import { postHandle } from '@/api'
import dayjs from 'dayjs'
export default {
  name: 'AlarmHistory',
  components: {
    WiseCrud,
    pEcharts
  },
  data() {
    return {
      loading: false,
      activeName: 'first',
      filtersItem: [],
      gatewayList: [],
      geteWayCodes: '',
      startTime: dayjs().startOf('day').toDate(),
      endTime: dayjs().endOf('day').toDate(),
      options: [
        {
          value: 'layer',
          label: '焊层'
        },
        {
          value: 'current',
          label: '焊接电流'
        },
        {
          value: 'voltage',
          label: '电压'
        },
        {
          value: 'hazTemp',
          label: '热影响区温度'
        },
        {
          value: 'airPressure',
          label: '气压'
        },
        {
          value: 'airFlux',
          label: '气体流量'
        },
        {
          label: '氩气纯度',
          value: 'arPurity'
        },
        {
          value: 'ssSpeed',
          label: '送丝速度'
        }
      ],
      dataType: ['current'],
      urls: {
        list: '/api/v1/welder-sbtx-second/hj-datas-comb/list',
        lists: '/api/v1/welder-sbtx-second/gateway-comb/list',
        export: '/api/v1/welder-sbtx-second/hj-datas-comb/export-excel'
      },
      handle: ['export', 'filters'],
      fields: [
        {
          label: '序号',
          type: 'selection',
          use: ['table']
        },
        {
          label: '项目编号',
          prop: 'welderNumber',
          type: 'text',
          use: ['table']
        },
        {
          label: '网关编号',
          prop: 'geteWayCode',
          type: 'text',
          labelWidth: '200px',
          use: ['table', 'filters']
        },
        {
          label: '工艺规程编号',
          prop: 'process',
          type: 'text',
          labelWidth: '200px',
          use: ['table']
        },
        {
          label: '焊接工艺',
          prop: 'hjProcess',
          type: 'text',
          labelWidth: '200px',
          use: ['table']
        },
        {
          label: '焊口编号',
          prop: 'weldcode',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '人员编号',
          prop: 'personCode',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '人员名称',
          prop: 'username',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '焊层',
          prop: 'layer',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '焊接电流',
          prop: 'current',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '电压',
          prop: 'voltage',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '热影响区温度',
          prop: 'hazTemp',
          type: 'text',
          tableWidth: '120px',
          use: ['table']
        },
        {
          label: '气压',
          prop: 'airPressure',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '气体流量',
          prop: 'airFlux',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '氩气纯度',
          prop: 'arPurity',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '送丝速度',
          prop: 'ssSpeed',
          type: 'text',
          tableWidth: '100px',
          use: ['table']
        },
        {
          label: '参数采集时间',
          prop: 'cjTime',
          type: 'datetime',
          operator: 'between',
          tableWidth: '200px',
          labelWidth: '200px',
          use: ['table', 'filters'],
          format: 'YYYY-MM-DD HH:mm:ss'
        }
      ],
      multipleSelection: [],
      page: {
        p: 1,
        ps: 10
      },
      dataList: []
    }
  },
  computed: {
    spaceId() {
      return this.$store.state.project.spaceId
    },
    filters() {
      return [
        {
          field: 'spaceId',
          operator: 'EQUALS',
          value: this.$store.state.project.spaceId
        }
      ]
    },
    option() {
      let timeData = []
      let series = []
      this.dataType.forEach(item => {
        let data = []
        this.dataList.forEach((element) => {
          data.push(element[item])
        })
        series.push({
          name: this.options.find(o => o.value == item).label,
          type: 'line',
          smooth: true,
          data: data
        })
      })
      this.dataList.forEach((element) => {
        timeData.push(dayjs(element.cjTime).format('YYYY-MM-DD HH:mm:ss'))
      })
      return {
        grid: {
          left: 30,
          right: 15,
          bottom: 100,
          top: 80
        },
        color: ['#5CD5C8', '#A48AEA', '#EAD18A', '#E07C71', '#8ED55C', '#D12A89'],
        legend: {
          x: 'center',
          y: 'top',
          show: true,
          top: '5%',
          right: '5%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          },
          data: series.map(item => item.name)
        },
        toolbox: {
          right: 80,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [{
          startValue: dayjs(this.startTime).format('YYYY-MM-DD HH:mm:ss')
        }, {
          type: 'inside'
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeData
        },
        yAxis: {
          type: 'value',
          axisPointer: {
            snap: true
          }
        },
        series: series
      }
    }
  },
  created() {
    this.gatewayNumbers()
  },
  methods: {
    gatewayNumbers() {
      postHandle('/api/v1/welder-sbtx-second/gateway-comb/list', {
        d: {
          filters: [
            {
              field: 'spaceId',
              operator: 'EQUALS',
              value: this.spaceId
            }
          ],
          page: {
            ps: 1000,
            p: 1
          },
          retPage: false
        }
      }).then((res) => {
        this.gatewayList = res.result
        this.geteWayCodes = this.gatewayList[0].gatewayCode
        this.gethistoryData()
      })
    },
    gethistoryData() {
      this.loading = true
      postHandle('/api/v1/welder-sbtx-second/hj-datas-comb/list', {
        d: {
          filters: [
            { field: 'spaceId', operator: 'EQUALS', value: this.spaceId },
            { field: 'geteWayCode', operator: 'EQUALS', value: this.geteWayCodes },
            { field: 'cjTime', operator: 'BETWEEN', value: dayjs(this.startTime).valueOf(), value_to: dayjs(this.endTime).valueOf() }
          ],
          page: {
            ps: 9999,
            p: 1
          },
          retPage: false
        }
      }).then((res) => {
        this.loading = false
        this.dataList = res.result
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    batchRemove() {
      if (!(this.multipleSelection && this.multipleSelection.length > 0)) {
        this.$message.error('请选择要删除的数据')
        return false
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          postHandle('/api/v1/welder-sbtx-second/hj-datas-comb/remove-batch', {
            d: {},
            obj: {
              dataIds: this.multipleSelection.map((item) => item.id)
            }
          })
            .then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$refs['wise-crud'].handleSearch()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style>
</style>
